שיעור מספר 12 :"צייר לי כבשה" (GUI)

Transcription

1 שיעור מספר 12 :"צייר לי כבשה" (GUI) אוהד ברזילי דן הלפרין בית הספר למדעי המחשב

2 מנשק משתמש גרפי (GUI) משפר את האינטראקציה בין המשתמש האנושי ובין המחשב: מחשב => אדם: ניתן להוסיף מימד ויזואלי למידע גופנים, צבעים, תמונות ארגון המידע על המסך בצורה נוחה ואינטואיטיבית אדם => מחשב: המשתמש יכול לבחור עכבר בנוסף למקלדת ולא רק להקליד אבסטרקציות חדשות של אינטראקציה: תפריטים, כפתורים, גרירה 2

3 3

4 שלבי פיתוח מנשק גראפי מהנדס מנשקי אנוש מפתח מנשק כך שיהיה מובן, יעיל, נעים מודדים את איכות המנשק על קב' משתמשים ומתקנים בהתאם מחליט איך הממשק יתנהג מממשים לנו אין תפקיד כ"כ גדול בתהליך מחליט על סוגי האלמנטים שיופיעו על המסך, ועל סידורם מחליט איך המנשק יישמע מעצב גראפי תוכנה 1 ייראה/ בשפת Java תוכניתן 4

5 הנדסת מנשקי אנוש אינטואיטיביות; המנשק צריך להתנהג בהתאם לציפיות המוקדמות של המשתמש/ת; פעולות אוטומטיות (גזור-הדבק, למשל), המראה של פריטים (צלמיות, למשל), המראה וההתנהגות הכללית של התוכנית, של הפלטפורמה המשתמש/ת בשליטה, לא המחשב; חזרה אחורה באשף, הנוכחי של התוכנית ומה היא עושה כרגע ידיעה מה המצב יעילות של המשתמש, לא של המחשב; חומרה היא זולה, משכורות הן יקרות, ואכזבות הן עוד יותר יקרות התאמה לתכיפות השימוש וללימוד התוכנה; האם משתמשים בה באופן חד פעמי (אשף לכתיבת צוואות) או יומיומי (דואל); גם משתמש יומיומי בתוכנה היה פעם מתחיל חסר ניסיון 5

6 עיצוב מנשקים קונסיסטנטיות קונטרסט להדגשת מה שבאמת דרוש הדגשה; עומס ויזואלי מפחית את הקונטרסט ארגון ברור של המסך (בדרך כלל תוך שימוש בסריג) כיוון וסדר ברורים לסריקת המידע (מלמעלה למטה משמאל לימין, או ימין לשמאל) העיצוב הגרפי של מנשק של תוכנית בדרך כלל אינו מוחלט; המשתמש ו/או הפלטפורמה עשויים להשפיע על בחירת גופנים ועל הסגנון של פריטים גראפיים (כפתורים, תפריטים); העיצוב צריך להתאים את עצמו לסביבה 6

7 שלושת הצירים של תוכנה גרפית אלמנטים מסוגים שונים על המסך (היררכיה של טיפוסים) הארגון הדו מימדי של האלמנטים, בדרך כלל בעזרת מיכלים ומנהלי פריסה ההתנהגות הדינמית של האלמנטים בתגובה לפעולות של המשתמש/ת ("ארועים": הקלדה, הקלקה, גרירה) 7

8 האלמנטים (widgets) כפתורים: תפריטים, טבלאות, רשימות, עצים: תיבות טקסט: ועוד

9 ארגון האלמנטים - חלונות כמיכלים כל דבר הוא widget (חלון, כפתור, תפריט, משטח) החלונות מקיימים יחס הכלה (אחד לרבים) משטח עבודה (אב עליון) אפליקציה (צייר) שורת משימות 9

10 מודל החלונות (המשך) 10

11 ארגון האלמנטים כאשר בונים מסך מגדירים עבורו מה יהיה אופן הסידור של איבריו הפנימיים בעזרת יצירת אובייקט Layout מתאים: שורה, טור, טבלה, ערימה הבנייה רקורסיבית: חלון (מיכל) עשוי להכיל תת חלונות (מיכלים) אשר לכל אחד מהם פריסה פנימית שונה, כאשר החלון העוטף אחראי רק על הפריסה של תת החלונות אובייקט ה Layout גם אחראי להתאמת גודל האיברים כאשר גודל החלון משתנה ניתן לשנות פרמטרים רבים באלגוריתם הסידור פרטים בהמשך... Understanding-Layouts/index.html 11

12 התנהגות כאשר המשתמש עושה משהו ("מחולל ארוע": בחירת כפתור, הקלדת מקלדת, גרירת עכבר, וכו') נקראות פונקציות שונות של האפליקציה למשל: כאשר המשתמש בוחר מהתפריט File <= save נרצה שתקרא הפונקציה Game.saveGame() בכל ספריות ה GUI המודרניות הדבר מתבצע בעזרת ה Observer (Listener דווקא GUI בעולם ה (שמכונה Design Pattern עבור ארועים שמעניינים אותנו אנו מגדירים מאזינים (listeners) שמיודעים בכל פעם שהארוע קרה והם אלה שקוראים לפונקציה המתאימה פרטים בהמשך... 12

13 "שלום עולם" public class HelloSwt { עצם ה Display את המסך מייצג } public static void main(string[] args) { } Display display = Display.getDefault(); Shell shell = new Shell(display); shell.settext("hello World!"); shell.setsize(300, 100); shell.open(); while (!shell.isdisposed()) { if (!display.readanddispatch()) { display.sleep(); } } display.dispose(); כל חלון מיוצג ע"י עצם מטיפוס Shell ההורה של החלון הוא המסך יש לשחרר משאבים בסיום העבודה בצורה מפורשת event loop 13

14 דוגמה יותר מעניינת: דפדפן זעיר מגולגל 14

15 מה הדפדפן אמור לעשות המשתמשת תקליד מחרוזת חיפוש בשדה בצד שמאל למעלה לחיצה על הכפתור I'm feeling lucky מימין לשדה הטקסט תשלח את מחרוזת החיפוש ל- Google כאשר תתקבל התשובה, הדפדפן ישלוף מהתשובה של Google את הכתובת (URL) הראשונה ויטען אותה לרכיב הצגת ה- HTML בתחתית המסך, וכן ישנה את כותרת החלון כך שתציג את ה- URL נממש את הדפדפן בעזרת ספרייה למימוש מנשקים גראפיים בשם : (Standard Widget Toolkit) SWT ספריות אחרות למימוש מנשקים גראפיים בג'אווה הן AWT ו- Swing. 15

16 SWT לעומת ספריות גרפיות אחרות java.awt כחלק מהספרייה הסטנדרטית מכילה הפצת Java המספקת שרותי GUI בסיסיים: את החבילה Abstract Windowing Toolkit בעיית המכנה המשותף הנמוך ביותר יעיל, יביל, מכוער בגרסאות מאוחרות של Java התווספה ספריית javax.swing המספקת שרותי GUI מתקדמים: JFC/Swing Look & Feel עשיר, איטי, כבד, מכוער (שנוי במחלוקת) ספריית SWT של IBM מנסה לרקוד על שתי החתונות גם יפה גם אופה המנשק הגרפי של Eclipse מבוסס SWT אינו סטנדרטי (יש להוריד כ zip נפרד) מקשה על הפצה כ standalone 16

17 מבנה המימוש public class GoogleBrowser { } private Shell shell = null; private Button button = null; private Text text = null; private Browser browser = null; /* call createshell and run event loop */ public static void main(string[] args) {...} /* create the GUI */ private void createshell() {...} /* send query to Google and return the first URL */ private static String search(string q) {...} 17

18 Widgets (אביזרים) השדות,browser,button,text רכיבים כאלה נקראים widgets ו- shell יתייחסו לרכיבי המנשק הגראפי; מעטפת (shell) הוא חלון עצמאי שמערכת ההפעלה מציגה, ושאינו מוכל בתוך חלון אחר; החלון הראשי של תוכנית הוא מעטפת, וגם דיאלוגים (אשף, דיאלוג לבחירת קובץ או גופן, וכדומה) הם מעטפות עצם המעטפת בג'אווה מייצג משאב של מערכת ההפעלה הרכיבים האחרים הם אלמנטים שמוצגים בתוך מעטפת, תפריטים, וכדומה; חלקם פשוטים וחלקם מורכבים מאוד רכיב להצגת (HTML כמו כפתורים, (כמו,Browser לפעמים הם עצמים שממופים לבקרים שמערכת ההפעלה מציגה בעצמה,(controls) ולפעמים הם עצמי ג'אווה טהורים 18

19 הלולאה הראשית public static void main(string[] args) { Display display = Display.getDefault(); GoogleBrowser app = new GoogleBrowser(); app.createshell(); while (!app.shell.isdisposed()) { if (!display.readanddispatch()) display.sleep(); } } display.dispose(); 19

20 יצירת המנשק הגראפי /* create the GUI */ private void createshell() { shell = new Shell(); shell.settext("browser Example"); //layout manager: a grid with 2 unequal columns shell.setlayout(new GridLayout(2, false)); text = new Text(shell, SWT.BORDER); text.setlayoutdata(new GridData(SWT.FILL, //horizontal alignment SWT.CENTER, //vertical alignment true, //grab horizontal space false)); //don't grab vertical space 20

21 פריסת רכיבי המנשק במעטפת מעטפות הם רכיבי מנשק שמיועדים להכיל רכיבי מנשק את הרכיבים המוכלים צריך למקם; רצוי לא למקם אותם באופן אבסולוטי (ערכי x ו- y בקואורדינטות של הרכיב המכיל) מנהלי פריסה mangers) (layout מחשבים את הפריסה על פי הוראות פריסה שמצורפות לכל רכיב מוכל GridLayout הוא מנהל פריסה שממקם רכיבים בתאים של טבלה דו- מימדית; רכיבים יכולים לתפוס תא אחד או יותר רוחב עמודה/שורה נקבע אוטומטית ע"פ הרכיב הגדול ביותר GridData הוא עצם שמייצג הוראות פריסה עבור ;GridLayout כאן ביקשנו מתיחה אופקית של הרכיב עצמו בתוך העמודה ושל העמודה כולה 21

22 בניית רכיבי מנשק בנאי שבונה רכיב מנשק מקבל בדרך כלל שני ארגומנטים: ההורה של רכיב המנשק בהיררכיית ההכלה, והסגנון של רכיב המנשק כאשר בנינו את שדה הטקסט, העברנו לבנאי את הארגומנטים shell (ההורה) ו- SWT.BORDER (סיבית סגנון) למעטפת אין הורה (אבל יכלו להיות לה סיביות סגנון) את תכונות ההורות והסגנון אי אפשר לשנות לאחר שהרכיב נבנה רכיבים שונים משתמשים בסיביות סגנון שונות; למשל, למעטפת יכולה להיות או לא להיות מסגרת עם כפתורי סגירה ומיזעור (המסגרת נקראת,(trim אבל לרכיב פנימי אי אפשר לבחור סגנון שכולל מסגרת כזו 22

23 המשך יצירת המנשק button = new Button(shell, SWT.NONE); button.settext("i'm feeling lucky"); button.setlayoutdata(new GridData(SWT.RIGHT, SWT.CENTER, false, false)); browser = new Browser(shell, SWT.NONE); browser.setlayoutdata(new GridData(SWT.FILL, SWT.FILL, //fill both ways false, true, //row grabs vertical space 2, 1)); //widget spans 2 columns 23

24 כמעט סיימנו נותר לבקש ממנהל הפריסה לארגן את הרכיבים ולהציג אותו למסך: private void createshell() {... //causes the layout manager to lay out the shell shell.pack(); } //opens the shell on the screen shell.open(); 24

25 בעיה. היישום לא עושה כלום החלון (shell) מוצג כהלכה על המסך, ומתנהג נכון כאשר אנו משנים את גודלו אולם אם מקלידים מילות חיפוש ולוחצים על הכפתור לא קורה דבר לשם כך צריך להוסיף ליישום טיפול בארוע לחיצה על הכפתור בעת לחיצה: יש לקרוא את הטקסט שהוקלד בתיבת החיפוש לבקש מאת גוגל את כתובת האתר המתאים ביותר לטקסט ולהזין את הכתובת לאובייקט ה Browser אנו נייצר מחלקה פנימית אנונימית שתאזין לארוע ותבצע את הפונקציונליות הדרושה 25

26 מחלקות פנימיות - תזכורת כבר ראינו בקורס מחלקות פנימיות של מחלקות אחרות - מחלקות אשר מוגדרות בתוך התחום בג'אווה ניתן להגדיר מחלקות מקומיות אפילו בתוך שרות של מחלקה אחרת במקרים כאלה, יש למחלקה הפנימית תפקיד מצומצם ומוגבל מגדירים אותה מחוץ לשרות) (אחרת היינו פעמים רבות המחלקה הפנימית היא מחלקה עם מופע אחד בלבד כדי לטפל במקרים כאלה Java מספקת תחביר מיוחד אשר חוסך את הצורך לתת שם למחלקה מחלקות אלו נקראות מחלקות חסרות שם :(anonymous inner classes) הגדרת המחלקה אינה כוללת שם למחלקה ההגדרה מתבצעת תוך כדי יצירת המופע של אותה המחלקה 26

27 מחלקה אנונימית - דוגמא public class Test { public static final double linecomissions = 1.1; public static void main(string[] args) { BankAccount b = new BankAccount(){ public double balance(){ balance -= Test.lineComissions; return super.balance(); } }; } } b.deposite(100); System.out.println(b.balance()); System.out.println(b.balance()); הגדרת מופיע של מחלקה פנימית אנונימית שיורשת מ- BankAccount ודורסת את balance() 27

28 מחלקה אנונימית - תחביר : כאשר יורשת מהמחלקה class-name new class-name ( [ argument-list ] ) { class-body } כאשר מממשת המנשק :interface-name new interface-name () { class-body } 28

29 הפרוצדורה שהכפתור מפעיל נוסיף לכפתור הדפדפן שלנו מאזין מחלקה אשר מקשיבה להקלקות על הכפתור המאזין הוא מחלקה אנונימית המממשת את המנשק SelectionListener עליו לממש את השרותים widgetselected ו- widgetdefaultselected button.addselectionlistener( new SelectionListener() public void widgetselected(selectionevent e) { } String query = text.gettext(); String url = search(query); // missing exception handling shell.settext(url); browser.seturl(url); ); public void widgetdefaultselected(selectionevent e) {} 29

30 אירועים והטיפול בהם מערכת ההפעלה מודיעה לתוכנית על אירועים: הקשות על המקלדת, הזזת עכבר והקלקה, בחירת אלמנטים, ועוד ההודעה מתקבלת על ידי עצם יחיד (singleton) מהמחלקה,Display שמייצג את מערכת ההפעלה (מע' החלונות) קבלת אירוע מעירה את התוכנית מהשינה ב- sleep כאשר קוראים ל- readanddispatch ה, רכיב צריך להודיע על האירוע, ומודיע לו display- מברר לאיזה הרכיב מפעיל את העצמים מהטיפוס המתאים לסוג האירוע שנרשמו להפעלה על ידי קריאה ל- add*listener 30

31 ארבע גישות לטיפול באירועים בעזרת טיפוסים סטאטיים ספציפיים לסוג האירוע: למשל, KeyListener הוא מנשק שמגדיר שני שירותים, KeyPressed מהם מקבל את הדיווח על האירוע בעזרת עצם מטיפוס KeyEvent ו- KeyReleased, שכל אחד ללא טיפוסים סטאטיים שמתאימים לאירועים ספיציפיים: האירוע מפעיל עצם מטיפוס Listener שמממש שירות בודד,,handleEvent והאירוע מדווח בעזרת טיפוס Event יותר יעיל, פחות בטוח בעזרת מחלקות ברירת מחדל אשר "מודעות" לארועים אך לא עושות דבר הנקראות מתאמים (Adapters) כדי להגדיר את הפעולה שיש לבצע נירש (אנונימית) מכזה Adapter ונדרוס את השרות המעניין שימושי כאשר במנשק יש שרותים רבים שאינם מעניינים אותנו יש ספריות של מנשקים גראפיים, למשל,AWT שמשתמשות בירושה: המחלקה שמייצגת את המנשק שלנו מרחיבה את Frame (מקביל ל- Shell ) handleevent ש, Frame- קוראת לו לטיפול באירועים ודורסת את השירות פרטים בתרגול 31

32 דוגמה לשימוש במאזין לא ספציפי button.addlistener( SWT.Selection, //the event we want to handle new Listener() { public void handleevent(event e) { String query = text.gettext(); String url = search(query); shell.settext(url); browser.seturl(url); } }); זהו מקרה פרטי של תבנית העיצוב Pattern) Observer (Design המאזין (בתפקיד ה (Observer נרשם אצל הכפתור (בתפקיד ה- (Subject 32

33 דוגמה לשימוש במתאם (adapter) קיימות מחלקות ברירת מחדל אשר "מודעות" להקלקות אך לא עושות דבר הנקראות מתאמים (Adapters) כדי להגדיר את הפעולה שיש לבצע נירש (אנונימית) מכזה Adapter ונדרוס את השרות widgetselected אין צורך לדרוס את השרות widgetdefaultselected button.addselectionlistener( new SelectionAdapter() { public void widgetselected(selectionevent e) { String query = text.gettext(); String url = search(query); shell.settext(url); browser.seturl(url); } }); 33

34 Adapter לעומת Listener לכפתור הוספנו מאזין ספציפי ממחלקה אנונימית שמרחיבה את SelectionAdapter SelectionAdapter היא מחלקה מופשטת שמממשת את המנשק SelectionListener שמגדיר שני שירותים ב- SelectionAdapter, שני השירותים אינם עושים דבר הרחבה שלה מאפשרת להגדיר רק את השירות שרוצים, על פי סוג האירוע הספיציפי שרוצים לטפל בו; ארועים אחרים יטופלו על ידי שירות שלא עושה כלום אם המחלקה האנונימית הייתה מממשת ישירות את,SelectionListener היא הייתה צריכה להגדיר את שני השירותים, כאשר אחד מהם מוגדר ריק - מסורבל לכתוב ומסורבל לקרוא כיום בסביבות פיתוח מודרניות ניתן לחולל קוד מימוש ריק אוטומטית 34

35 עכשיו באמת כמעט סיימנו. חיפוש ב- Google private static String search(string q) throws IOException, JSONException { URL url = new URL(" + URLEncoder.encode(q, "UTF-8")); URLConnection connection = url.openconnection(); StringBuilder builder = new StringBuilder(); Scanner s = new Scanner(connection.getInputStream()); while (s.hasnextline()) { builder.append(s.nextline()); } JSONObject json = new JSONObject(builder.toString()).getJSONObject("responseData"); JSONArray jsonarr = json.getjsonarray("results"); json = (JSONObject) jsonarr.get(0); } return (String) json.get("url"); 35

36 והתוצאה 36

37 סיכום ביניים ראינו את המחלקות שמייצגות רכיבי מנשק גראפי ראינו איך נרשמים להגיב על אירוע כגון לחיצה על כפתור ראינו כיצד מגדירים את הפריסה של הרכיבים על המסך האם המנשק הגראפי של התוכנית מוצלח? לא, הכפתור מיותר, ובעצם, אפשר היה להשתמש בשדה הטקסט גם עבור חיפוש וגם עבור הקלדת URLבאופן ישיר המחלקות שמייצגות את רכיבי המנשק מורכבות מאוד: צריך ספר או מדריך מקוון צריך להתאמן (קישורים בסוף המצגת) רצוי להשתמש במנגנון עריכה ייעודי למנשקים גראפיים Builder) (GUI 37

38 GUI and WEB בשנים האחרונות יש מגמה של פיתוח מנשקי משתמש מבוססי WEB א שר ניתן להציג אותם בדפדפן העקרונות של מנשקים אלו דומים לאלו שראינו אולם הטכנולוגיות המעורבות בכך שונות: Html / JavaScript Flash, Silverlight במקביל, נעשים גם מאמצים לתרגום אוטומטי של קוד GWT למשל Html / JavaScript לקוד Java 38

39 Look and Feel מערכות הפעלה עם מנשק גראפי מספקות שירותי מנשק (למשל, Windows ו- MacOS ; אבל לא לינוקס ויוניקס) שימוש במנשקים של מערכת ההפעלה תורם למראה אחיד ולקונסיסטנטיות עם ציפיות המשתמש ועם קביעת התצורה שלו ) אם יש דרך לשלוט על מראה הרכיבים, כמו בחלונות) ספריות מנשקים משתמשות באחת משתי דרכים על מנת להשיג אחידות עם המנשקים של מערכת ההפעלה שימוש ישיר ברכיבי מנשק של מערכת ההפעלה; SWT,AWT אמולציה של התנהגות מערכת ההפעלה אבל כמעט ללא שימוש ברכיבי המנשק שלה (פרט לחלונות); למשל ;Qt,JFace,Swing זה מאפשר להחליף מראה, pluggable look & feel 39

40 יתרונות וחסרונות של Pluggable L&F מאפשר להגדיר מראות חדשים לרכיבים; שימושי עבור משחקים, עבור תוכניות שרוצים שלא יראו כמו תוכנות מחשב (בעיקר נגני מוסיקה וסרטים), ובשביל מיתוג (branding) מאפשר לבנות יישומים עם מראה אחיד על כל פלטפורמה; שימושי ליישומים ארגוניים קשה לממש look & feel חדש סכנה של מראה מיושן, אם מערכת ההפעלה החליפה את המראה של הרכיבים אבל האמולציה לא עודכנה (למשל מראה של חלונות 2000 על מערכת חלונות (XP אי התאמה לקביעת התצורה של המשתמשת (אם היא בחרה למשל להשתמש במראה של חלונות 2000 על חלונות (XP 40

41 תחושת המנשק בפלטפורמות שונות בחלונות משתמשים בצירופים Control-V,Control-C עבור גזור והדבק במחשבי מקינטוש יש מקש,Control אבל יש גם מקש,Command וגזור והדבק מופעלי על ידי,Command-V,Command-C ולא על ידי צירופי Control בתוכניות רבות בלינוקס מספיק לסמן קטע בשביל להעתיק אותו, והכפתור האמצעי בעכבר משמש להדבקה תוכנית שמפעילה גזור והדבק ע"י Control-C/V תחוש לא טבעית במקינטוש ב- SWT מוגדרים המקשים Control וכדומה, אבל גם "מקשים מוכללים",MOD2,MOD1 ו- MOD3, כאשר MOD1 ממופה ל- Control בחלונות אבל ל- Command במקינטוש בעיה דומה: הפעלת תפריט הקשר; הקלקה ימנית בחלונות, אבל במקינטוש יש לעכבר רק לחצן אחד; מוגדר אירוע מיוחד 41

42 ויורשיו רשימה חלקית Widget מחלקת על מופשטת כפתור המייצג: כפתור לחיץ, כפתור רדיו,,checkbox וכו' תווית לטקסט או תמונה? איפה נמצאת המחלקה Shell 42

43 פריסה נכונה פריסה נכונה של רכיבים היא אחד האתגרים המשמעותיים בפיתוח מנשק גראפי התוכנית צריכה להבטיח עד כמה שאפשר שהמנשק יראה תמיד "נכון", למרות מסכים בגדלים שונים וברזולוציות שונות, כאשר רכיבים כגון טבלאות ושדות טקסט מציגים מעט מידע או הרבה, וכאשר המשתמשת מקטינה או מגדילה את החלון מיקום רכיבים על המסך בשיעורים מוחלטים אינו רגיש למגוון האפשרויות מיכלי (containers, composites) GUI מבצעים האצלה של אסטרטגיית הסידור למחלקה יעודית לכך אלגוריתמי פריסה מתוחכמים עבור מיכלים, כגון,GridLayout מסייעים, אבל צריך להבין כיצד מתבצעים חישובי הפריסה וכיצד להשפיע עליהם 43

44 דוגמא שיוך מנהל פריסה למיכל שיוך מנהל הפריסה (FillLayout) לחלון הגדרת הורה shell.setlayout(new FillLayout()); Label lbl = new Label(shell, SWT.CENTER); lbl.settext("hello world!"); shell.pack(); shell.open(); מיכל מכיל התאם את גודל הרכיבים לפי אלגוריתם הסידור (אולי התווספו כמה רכיבים) הצג את החלון על המסך 44

45 אלגוריתמי אריזה רכיבים בשורה/עמודה, גודל אחיד לכולם :FillLayout רכיבים בשורה/עמודה, עם אפשרות שבירה למספר ועם יכולת לקבוע רוחב/גובה לרכיבים :RowLayout שורות/עמודות, :GridLayout כפי שראינו, סריג שניתן לקבוע בו איזה שורות ועמודות ימתחו ואיזה לא, ולקבוע רוחב/גובה לרכיבים :FormLayout מיקום בעזרת אילוצים על ארבעת הקצוות (או חלקם) של הרכיבים; אילוצים יחסיים או אבסולוטיים ביחס למיכל (למשל, באמצע רוחבו ועוד 4 פיקסלים) או אילוצים אבסולוטיים ביחס לנקודת קצה של רכיב אחר (דבוק לרכיב אחר או דבוק עם הפרדה של מספר פיקסלים נתון) :StackLayout ערימה של מיכלים בגודל זהה אבל רק העליון נראה; שימושי להחלפה של תוכן מיכל או חלון 45

46 הרכבה של Composites כדי לבנות בצורה מודולרית מסכים מורכבים (ולפתח כל איזור בנפרד) רצוי להשתמש במחלקה Composite (מקבילה למחלקה (Swing/AWT ב- J/Panel בדוגמא שלפנינו ה Shell מכיל 3 Composites שונים, כל אחד מהם מנוהל ע"י מנהל פריסה משלו 46

47 shell.setlayout(new FormLayout()); //Fill Layout panel Composite fillcomp = new Composite(shell, SWT.BORDER); fillcomp.setlayout(new FillLayout(SWT.VERTICAL)); Label label0 = new Label(fillComp, SWT.NONE); label0.settext("instructions:");... //Row Layout panel Composite rowcomp = new Composite(shell, SWT.NONE); RowLayout rowlayout = new RowLayout(); rowlayout.pack = false; rowcomp.setlayout(rowlayout); Button b1 = new Button(rowComp, SWT.PUSH); b1.settext("address");... //Grid Layout panel Composite gridcomp = new Composite(shell, SWT.NONE); GridLayout gridlayout = new GridLayout(); gridlayout.numcolumns = 2; gridcomp.setlayout(gridlayout); Label label11 = new Label(gridComp, SWT.NONE); label11.settext("name:"); 47

48 שחרור משאבים חלק מהעצמים שמרכיבים את המנשק הגראפי מייצגים למעשה משאבים של מערכת ההפעלה, כמו חלונות, כפתורים, צבעים, גופנים, ותמונות כאשר עצם שמייצג משאב נוצר, הוא יוצר את המשאב, ואם לא נשחרר את המשאבים הללו, נדלדל את משאבי מערכת ההפעלה למשל, צבעים בתצוגה של 8 או 16 סיביות לכל פיקסל ב- SWT, אם יצרנו עצם שמייצג משאב של מערכת ההפעלה, צריך לקרוא לשירות dispose כאשר אין בו צורך יותר dispose משחרר גם את כל הרכיבים המוכלים על מנת לחסוך במשאבים, יש הפרדה בין מחלקות שמייצגות משאבים (למשל (Font וכאלה שלא (FontData) 48

49 GUI Builders כאשר ה GUI מורכב, ניתן ומומלץ להשתמש בתוכנות ויזואליות לעיצוב מנשקים המתכנת / מעצב בוחר רכיבי GUI מתפריט, הוא יכול עם העכבר לשנות את מיקומם וגודלם, ויכול בכפתור ימני לעדכן את מאפיניהם התוכנה מחוללת בצורה אוטומטית את הקוד המתאים אותו ניתן גם לערוך ב Eclipse קיימים כמה תוספים לשם כך:

50 משאבים יחודיים כמה משאבים שימושיים היורשים מ: org.eclipse.swt.graphics.resource צבעים (Color) גופנים (Font) סמנים (Cursor) תמונות (Image) יכולים להיות משותפים לכמה רכיבים אינם משתחררים אוטומטית ע"י לשחרר אותם מפורשות dispose ולכן יש 50

51 דוגמא צבעים וגופנים Font times16bi = new Font(null, "Times New Roman", 16, SWT.BOLD SWT.ITALIC); Color deeppurple = new Color(null, 120, 45, 134); Label lbl = new Label(shell, SWT.CENTER); lbl.setfont(times16bi); lbl.setbackground(deeppurple); lbl.setforeground( display.getsystemcolor(swt.color_yellow)); lbl.settext("colors and Fonts");... times16bi.dispose(); deeppurple.dispose(); display.dispose(); 51

52 תמונות GC gc = new GC(image); gc.setforeground(display.getsystemcolor(swt.color_white)); gc.drawtext("i've been drawn on",0,0,true); gc.dispose(); ניתן לטעון תמונות ממערכת הקבצים ע"י שימוש בנתיב מלא: Image image = new Image(display, "C:/eclipse/eclipse/plugins/org.eclipse.platform_2.0.2/eclipse_lg.gif"); אולם עדיף לציין מיקום יחסי למיקומה של מחלקה ידועה: Image image = new Image(display, ShellWithButtonShowingEclipseLogo.class.getResourceAsStream("eclipse_lg.gif")); לאחר שטענו את התמונה לזיכרון ניתן לשבץ אותה בכל פקד (למשל על כפתור): Button button = new Button(shell,SWT.PUSH); button.setimage(image); המתכנת יכול לשלוט במאפיינים רבים של התמונה לרבות: צבעים, שקיפות, אפקטים, אנימציה gif),(animated שינוי גודל ופרופורציה, ציור על גבי התמונה ושימוש בתמונה כצלמית הסמן (cursor icon) באחריות המתכנתת לבצע dispose על התמונה הנוצרת 52

53 שימוש בתפריטים בעזרת המחלקות Menu ו- MenuItem ניתן בקלות לקונן תפריטים ע"י הוספת תפריט לתפריט טיפול בארועים בעזרת הוספת MenuListener SelectionListeners או ניתן להשתמש ב- & כדי לציין את מקש קיצור הדרך לתפריט (יסומן בתפריט כ- _) יש להגדיר את מקש קיצור הדרך מפורשות ע"י setaccelerator 53

54 Menu top = new Menu(shell, SWT.BAR); MenuItem file = new MenuItem(top, SWT.CASCADE); file.settext("&file"); Menu filemenu = new Menu(shell, SWT.DROP_DOWN); file.setmenu(filemenu); MenuItem newitem = new MenuItem(fileMenu, SWT.CASCADE); newitem.settext("&new"); Menu newmenu = new Menu(shell, SWT.DROP_DOWN); newitem.setmenu(newmenu); MenuItem new_file = new MenuItem(newMenu, SWT.NULL); new_file.settext("f&ile\tctrl+n"); new_file.setaccelerator(swt.ctrl + 'N'); דוגמא MenuItem new_project = new MenuItem(newMenu, SWT.NULL); new_project.settext("&project\talt+p"); new_project.setaccelerator(swt.alt + 'P'); MenuItem open = new MenuItem(fileMenu, SWT.NULL); open.settext("&open...\tctrl+o"); open.setaccelerator(swt.ctrl + 'O'); MenuItem close = new MenuItem(fileMenu, SWT.NULL); close.settext("&close\tctrl+f4"); close.setaccelerator(swt.ctrl + SWT.F4); shell.setmenubar(top); 54

55 עשה זאת בעצמך ניתן לצייר על רכיבי GUI (להבדיל מלהוסיף רכיבים מוכנים) בעזרת מחלקת ההקשר הגרפי ) - GC (Graphics Context ב SWT ניתן לצייר על ה- GC של כל רכיב שמממש את המנשק Drawable לרבות:,Control ו- Image המחלקה Canvas מיועדת לשמש כמשטח ציור עם פונקציות יעודיות לשם כך 55

56 עשה זאת בעצמך נצייר על GC ע"י שימוש בשרות drawxxx הכולל את (רשימה חלקית): void drawarc(int x, int y, int width, int height, int startangle, int arcangle) void drawfocus(int x, int y, int width, int height) void drawimage(image image, int x, int y) void drawline(int x1, int y1, int x2, int y2) void drawoval(int x, int y, int width, int height) void drawpath(path path) void drawpoint(int x, int y) void drawpolygon(int[] pointarray) void drawrectangle(int x, int y, int width, int height) void drawroundrectangle(int x, int y, int width, int height, int arcwidth, int archeight) void drawstring(string string, int x, int y) void drawtext(string string, int x, int y) 56

57 "צייר לי עיגול 1" final Display display = new Display(); final Shell shell = new Shell(display); shell.setbounds(10, 10, 200, 200); shell.open(); GC gc = new GC(shell); Rectangle rect = shell.getclientarea(); gc.drawoval(0, 0, rect.width - 1, rect.height - 1); while (!shell.isdisposed()) { if (!display.readanddispatch()) display.sleep(); } 57

58 עשה זאת בעצמך ואולם, הקוד בשקף הקודם אינו תומך בשינוי גודל החלון כדי שהציור ישמור על עיקביותו גם לאחר ארועי חשיפה (שינוי גודל החלון, הסתרת/מזעור החלון ע"י חלונות אחרים) יש לדאוג לציור מחדש לאחר כל ארוע כזה לשם כך נכתוב את פונקצית הציור כשגרת הטיפול בארועי ציור השגרה מקבלת כארגומנט ארוע ציור לחלץ ממנו הפנייה להקשר הגרפי PaintEvent אשר ניתן 58

59 "צייר לי עיגול 2" final Display display = new Display(); final Shell shell = new Shell(display); shell.addpaintlistener(new PaintListener() { }); public void paintcontrol(paintevent event) { } Rectangle rect = shell.getclientarea(); event.gc.drawoval(0, 0, rect.width - 1, rect.height - 1); shell.setbounds(10, 10, 200, 200); shell.open(); 59

60 2 חלופות איך נתכנן משחק שח גרפי? עשה זאת בעצמך: ציור של משבצות שחור-לבן לכידה של ארועי לחיצה על העכבר שימוש ב :widgets בניית סריג של כפתורים ריבועיים בצבעי שחור ולבן לסרוגין לכידה של ארועי בחירת כפתור מה היתרונות והחסרונות של כל אחת מהגישות? 60

61 הפרדה בין מודל והצגה עקרון מרכזי בבניין יישומים מבוססי גרפיקה הוא ההפרדה בין המודל וההצגה separation) (model/view המודל (הנתונים והלוגיקה של התוכנית) אמור להיות אדיש לשינויים בהצגה (ואולי לאפשר ריבוי הצגות במקביל) 61

62 JFace Viewers החבילה JFace מציעה מגוון מחלקות המציעות שרותי GUI מתקדמים הכתובים מעל (בעזרת) הספריה SWT אחת המשפחות בחבילה מכילה הצגות למבני נתונים שימושיים כגון: ListViewer, CheckboxTableViewer, CheckboxTreeViewer, TableTreeViewer, TableViewer, TreeViewer למשל, אם ברצוננו להציג למשתמש רשימה של ספרים נרצה לקשור בין רשימת הספרים (עצמים מטיפוס (Book ובין רכיב הרשימה הויזואלית לצורך כך יש להגדיר לרשימת הספרים: LabelProvider ו- (Swing בספרית Renderer) StructuredContentProvider 62

63 JFace Dialogs בחבילה JFace ניתן גם למצוא מגוון תיבות דו-שיח לתקשורת עם המשתמש: MessageDialog.openWarning(shell, "Title", "Warning message"); 63

64 JFace Dialogs String[] buttontext = new String[] { "Button1", "Button2", "Button3" }; MessageDialog messagebox; = new MessageDialog(shell, "Title", null, "Message", MessageDialog.ERROR, buttontext, 1); messagebox.open(); ניתן להגדיר מספר סוגי תיבות דו-שיח: MessageDialog.NONE, MessageDialog.ERROR, MessageDialog.INFORMATION, MessageDialog.QUESTION, MessageDialog.WARNING messagebox.getreturncode(); קריאת בחירת המשתמש ע"י: 64

65 JFace Dialogs InputDialog inputbox = new InputDialog(shell, "Title", "Message", "Initial Value", null); inputbox.open(); inputbox.getreturncode(); inputbox.getvalue(); קריאת קלט משתמש ע"י: 65

66 JFace Dialogs ColorDialog d = new ColorDialog(shell); RGB selection = d.open(); FileDialog dialog = new FileDialog (shell, SWT.OPEN); dialog.settext ("Open an image file or cancel"); String string = dialog.open (); 66

67 סיכום מנשקים גרפיים דע/י את מקומך שלושה מנגנונים כמעט אורתוגונאליים: ירושה, הכלה, אירועים פגמים במנשק גראפי נובעים במקרים רבים או מפריסה לא נכונה של רכיבים במיכל, או מחוסר תגובה או תגובה לא מספיקה לאירועים לא קשה, אבל צריך להתאמן בתכנות מנשקים גראפיים ספר,,GUI Builder ודוגמאות קטנות מסייעים מאוד ממשקים מורכבים בנויים לפעמים תוך שימוש בעצמי תיווך בין רכיבי המנשק ובין החלק הפונקציונאלי של התוכנית (המודל); למשל, jface מעל ;SWT קשה יותר ללמוד להשתמש בעצמי התיווך, אבל הם מקטינים את כמות הקוד שצריך לפתח ומשפרים את הקונסיסטנטיות של המנשק 67

68 מקורות מקוונים באתר :Eclipse מקטעי קוד: דוגמאות לצפייה בתוך :eclipse באתר אוניברסיטת מניטובה (קנדה): 68